import { useNavigate } from 'react-router-dom';

export default function Developing() {
    const navigate = useNavigate();

    const handleGoBack = () => {
        navigate(-1);
    };

    const handleGoHome = () => {
        navigate('/');
    };

    return (
        <div style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            minHeight: '60vh',
            padding: '20px',
            textAlign: 'center',
            color: '#666'
        }}>
            <div style={{
                fontSize: '80px',
            }}>
                <svg 
                    width="80" 
                    height="80" 
                    viewBox="0 0 24 24" 
                    fill="none" 
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path 
                        d="M12 2L22 20H2L12 2Z" 
                        fill="#FFA500" 
                        stroke="#FF8C00" 
                        strokeWidth="2"
                    />
                    <path 
                        d="M12 8V14" 
                        stroke="white" 
                        strokeWidth="2" 
                        strokeLinecap="round"
                    />
                    <circle 
                        cx="12" 
                        cy="17" 
                        r="1" 
                        fill="white"
                    />
                </svg>
            </div>
            <h2 style={{
                fontSize: '24px',
                marginBottom: '10px',
                color: '#333'
            }}>
                功能开发中
            </h2>
            <p style={{
                fontSize: '16px',
                marginBottom: '30px',
                color: '#999',
                maxWidth: '400px',
                lineHeight: '1.5'
            }}>
                该功能正在紧急开发中，敬请期待！
                <br />
                我们会尽快完成并上线此功能
            </p>
            <div style={{
                display: 'flex',
                gap: '15px',
                flexWrap: 'wrap'
            }}>
                <button 
                    onClick={handleGoBack}
                    style={{
                        padding: '10px 20px',
                        backgroundColor: '#1890ff',
                        color: 'white',
                        border: 'none',
                        borderRadius: '4px',
                        cursor: 'pointer',
                        fontSize: '14px'
                    }}
                >
                    返回上页
                </button>
                <button 
                    onClick={handleGoHome}
                    style={{
                        padding: '10px 20px',
                        backgroundColor: '#52c41a',
                        color: 'white',
                        border: 'none',
                        borderRadius: '4px',
                        cursor: 'pointer',
                        fontSize: '14px'
                    }}
                >
                    返回首页
                </button>
            </div>
        </div>
    );
}
